<template>
    <div class="zsdx-solution">
        <div class="section">
            <div
                class="section-modules-title"
                style="margin-top: 0.8rem;margin-bottom: 0.4rem;"
            >
                我们的解决方案
            </div>

            <ul class="solution-navtion">
                <li
                    v-for="(item, index) in solutionList"
                    :key="index"
                    class="solution-item"
                    :class="solutionIndex == item.id ? 'active' : ''"
                    @click="solutionIndex = item.id"
                >
                    {{ item.title }}
                </li>
            </ul>

            <div class="solution-content">
                <p class="solution-content-word">
                    {{ solutionList[solutionIndex - 1].title }}
                </p>
                <p class="solution-content-title">
                    {{ solutionList[solutionIndex - 1].tipsTitle }}
                </p>
                <p class="solution-content-desc">
                    {{ solutionList[solutionIndex - 1].tipsDesc }}
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ZsdxSolution',
    data() {
        return {
            solutionIndex: 1,
            solutionList: [
                {
                    title: '流量',
                    id: 1,
                    tipsTitle: '帮企业产品上架到每所高校的校园商城',
                    tipsDesc: ''
                },
                {
                    title: '转化',
                    id: 2,
                    tipsTitle: '每个品牌将会在每所学校匹配多个校园代理',
                    tipsDesc: ''
                },
                {
                    title: '品牌',
                    id: 3,
                    tipsTitle: '不错过学生的每个特色节日',
                    tipsDesc: '开学季 女生节 520 毕业季 双11 双12 圣诞节 元旦节'
                }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.section {
    .solution-navtion {
        display: flex;
        .solution-item {
            width: 1.3rem;
            height: 0.74rem;
            background: rgba(235, 235, 235, 1);
            border-radius: 0.12rem;
            font-size: 0.28;
            font-weight: 400;
            color: rgba(136, 144, 156, 1);
            margin-left: 0.2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            transition: 0.3s;
            &.active {
                color: #fff;
                background: linear-gradient(
                    180deg,
                    rgba(108, 212, 255, 1) 0%,
                    rgba(3, 148, 255, 1) 100%
                );
                &:after {
                    display: block;
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 0;
                    bottom: -0.15rem;
                    border-left: 0.15rem solid transparent;
                    border-right: 0.15rem solid transparent;
                    border-top: 0.15rem solid #0394ff;
                }
            }
        }
    }

    .solution-content {
        width: 7.02rem;
        padding: 0.4rem 0.24rem 0.4rem 0.24rem;
        margin: 0 auto;
        margin-top: 0.2rem;
        background-image: url('//cdn.zsdx.cn/wei/images/new_home_mobile/index/liuliang.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 0.04rem;
        .solution-content-word {
            font-size: 0.24rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.6);
        }
        .solution-content-title {
            font-size: 0.28rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.87);
            margin: 0.2rem 0;
        }
        .solution-content-desc {
            font-size: 0.24rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.6);
        }
    }
}
</style>
